import React, { useState } from "react";
import styles from "./index.module.less";
import Nav from "@pages/nav";
import PortalContainer from "@components/portalContainer";
import { Outlet, useNavigate, useLocation } from "react-router-dom";

const headOptions = [
    {
        id: "0",
        headTile: "答题数",
        headUrl: "/answerRank/totalAnswerNumbers",
    },
    {
        id: "1",
        headTile: "采纳数",
        headUrl: "/answerRank/acceptionNumbers",
    },
    {
        id: "2",
        headTile: "赚G币",
        headUrl: "/answerRank/gMoneyFromAnswers",
    },
];

const AnswerRank = () => {
    const navigate = useNavigate();
    const local = useLocation();

    const type =
        parseInt(
            headOptions.find((item) => item.headUrl === local.pathname).id
        ) + 1;

    const [activeKey, setActiveKey] = useState(0);

    return (
        <div className={styles.answer_rank}>
            <Nav />
            <div className={styles.rank_wrap}>
                <div className={styles.rank_head}>
                    <ul className={styles.head_ul}>
                        {headOptions.map((item, index) => {
                            return (
                                <li
                                    key={item.id}
                                    className={`${
                                        activeKey === index ? styles.active : ""
                                    }`}
                                    onClick={() => {
                                        setActiveKey(index);
                                        navigate(item.headUrl);
                                    }}
                                >
                                    {item.headTile}
                                </li>
                            );
                        })}
                    </ul>
                </div>
                <div className={styles.rank_content}>
                    <div className={styles.rank_title}>
                        <p className={styles.p1}>排名</p>
                        <p className={styles.p2}>答友昵称</p>
                        <p className={styles.p3}>
                            {type === 1
                                ? "答题数"
                                : type === 2
                                ? "采纳数"
                                : type === 3
                                ? "赚G币"
                                : undefined}
                        </p>
                        <p className={styles.p4}>
                            {type === 1
                                ? "采纳数"
                                : type === 2
                                ? "答题数"
                                : type === 3
                                ? "采纳数"
                                : undefined}
                        </p>
                        <p className={styles.p5}>
                            {type === 1
                                ? "赚G币"
                                : type === 2
                                ? "赚G币"
                                : type === 3
                                ? "答题数"
                                : undefined}
                        </p>
                    </div>
                    <div className={styles.rank_main}>
                        <ul className={styles.main_ul}>
                            <Outlet />
                        </ul>
                    </div>
                </div>
            </div>
            <PortalContainer />
        </div>
    );
};

export default AnswerRank;
